<template>
  <div class="sales-trend-container">
    <h1>销售趋势</h1>
    <div class="filters">
      <select v-model="selectedProduct">
        <option v-for="product in products" :key="product" :value="product">{{ product }}</option>
      </select>
      <select v-model="selectedAttribute">
        <option v-for="attribute in attributes" :key="attribute" :value="attribute">{{ attribute }}</option>
      </select>
    </div>
    <div ref="salesChart" style="width: 100%; height: 80%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'SalesTrend',
  data() {
    return {
      salesData: this.generateSalesData(),
      currentSalesIndex: 0,
      products: ['产品A', '产品B', '产品C'], // 拟造的产品选择内容
      attributes: ['属性1', '属性2', '属性3'], // 拟造的属性选择内容
      selectedProduct: '产品A',
      selectedAttribute: '属性1'
    };
  },
  mounted() {
    this.initSalesChart();
    setInterval(this.updateSalesDisplay, 5000); // 每5秒更新销售数据
  },
  methods: {
    generateSalesData() {
      return Array.from({ length: 31 }, () => Math.floor(Math.random() * 5000) + 1000);
    },
    generateGrowthRateData() {
      return Array.from({ length: 31 }, () => Math.random().toFixed(2)); // 生成随机增长率数据
    },
    updateSalesDisplay() {
      this.currentSalesIndex = (this.currentSalesIndex + 1) % (this.salesData.length - 7);
      this.initSalesChart();
    },
    initSalesChart() {
      const salesChart = echarts.init(this.$refs.salesChart);
      const option = {
        xAxis: {
          type: 'category',
          data: Array.from({ length: 7 }, (_, i) => `4.${this.currentSalesIndex + i + 1}`),
          name: '时间',
          nameTextStyle: {
            fontSize: 16
          },
          axisLabel: {
            fontSize: 14
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '金额（元）',
            nameTextStyle: {
              fontSize: 16
            },
            axisLabel: {
              fontSize: 14
            }
          },
          {
            type: 'value',
            name: '增长率',
            position: 'right',
            nameTextStyle: {
              fontSize: 16
            },
            axisLabel: {
              fontSize: 14
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            const sales = params[0].data;
            const growthRate = params[1].data;
            return `金额：${sales} 元</br>增长率：${growthRate} %`;
          }
        },
        series: [{
          data: this.salesData.slice(this.currentSalesIndex, this.currentSalesIndex + 7),
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 123, 255, 1)' },
              { offset: 1, color: 'rgba(0, 123, 255, 0.5)' }
            ])
          },
          animationDuration: 1000 // 增加动画效果
        },
        {
          name: '增长率',
          data: this.generateGrowthRateData().slice(this.currentSalesIndex, this.currentSalesIndex + 7),
          type: 'line',
          yAxisIndex: 1, // 使用右侧的y轴
          itemStyle: {
            color: 'rgba(255, 0, 0, 0.8)'
          }
        }]
      };
      salesChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.sales-trend-container {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.filters {
  margin-bottom: 20px;
}

select {
  margin-right: 20px;
  padding: 10px; /* 增大选择框的内边距 */
  font-size: 16px; /* 增大字体 */
  border-radius: 5px; /* 添加圆角效果 */
  border: 1px solid #ccc; /* 添加边框颜色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

select:hover {
  border-color: #888; /* 悬停时改变边框颜色 */
}
</style>